<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Inspiration for Article Intro Effects | Demo 2</title>
		<meta name="description" content="Inspiration for Article Intro Effects" />
		<meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web design" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component2.css" />
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body class="demo-2">
		<div id="container" class="container intro-effect-fadeout">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix">
				<span class="right"><a class="codrops-icon codrops-icon-drop"><span>Back to the Github</span></a></span>
			</div>
			<header class="header">
				<div class="bg-img"><img class="blur1" src="img/2.jpg" alt="Background Image" /></div>
				<div class="title">
					<!-- <h1>Unconditional Love &amp; Cookies</h1> -->
					<p class="subline">Inspiration for Article Intro Effects</p>
					<p>by <strong>Jason</strong> &#8212; Posted in <strong>Animals</strong> on <strong>NOV 10, 2014</strong></p>
				</div>
			</header>
			<button class="trigger" data-info="Click to see the header effect"><span>Trigger</span></button>
			<article class="content">
				<div>
					<p>We may define a food to be any substance which will repair the functional waste of the body, increase its growth, or maintain the heat, muscular, and nervous energy. </p>
					<p>In its most comprehensive sense, the oxygen of the air is a food; as although it is admitted by the lungs, it passes into the blood, and there re-acts upon the other food which has passed through the stomach. It is usual, however, to restrict the term food to such nutriment as enters the body by the intestinal canal. Water is often spoken of as being distinct from food, but for this there is no sufficient reason.</p>
					<p>Many popular writers have divided foods into flesh-formers, heat-givers, and bone-formers. Although attractive from its simplicity, this classification will not bear criticism. Flesh-formers are also heat-givers. Only a portion of the mineral matter goes to form bone.</p>
					<p>These last are not strictly foods, if we keep to the definition already given; but they are consumed with the true foods or nutrients, comprised in the other two classes, and cannot well be excluded from consideration.</p>
					<p>Water forms an essential part of all the tissues of the body. It is the solvent and carrier of other substances.</p>
					<p>Mineral Matter or Salts, is left as an ash when food is thoroughly burnt. The most important salts are calcium phosphate, carbonate and fluoride, sodium chloride, potassium phosphate and chloride, and compounds of magnesium, iron and silicon.</p>
					<h3>Flesh-formers, heat-givers, and bone-formers</h3>
					<p>Mineral matter is quite as necessary for plant as for animal life, and is therefore present in all food, except in the case of some highly-prepared ones, such as sugar, starch and oil. Children require a good proportion of calcium phosphate for the growth of their bones, whilst adults require less. The outer part of the grain of cereals is the richest in mineral constituents, white flour and rice are deficient. Wheatmeal and oatmeal are especially recommended for the quantity of phosphates and other salts contained in them. Mineral matter is necessary not only for the bones but for every tissue of the body.</p>
					<p>When haricots are cooked, the liquid is often thrown away, and the beans served nearly dry, or with parsley or other sauce. Not only is the food less tasty but important saline constituents are lost. The author has made the following experiments:—German whole lentils, Egyptian split red lentils and medium haricot beans were soaked all night (16 hours) in just sufficient cold water to keep them covered. The water was poured off and evaporated, the residue heated in the steam-oven to perfect dryness and weighed. After pouring off the water, the haricots were boiled in more water until thoroughly cooked, the liquid being kept as low as possible. The liquid was poured off as clear as possible, from the haricots, evaporated and dried. The ash was taken in each case, and the alkalinity of the water-soluble ash was calculated as potash (K2O). The quantity of water which could be poured off was with the German lentils, half as much more than the original weight of the pulse; not quite as much could be poured off the others.</p>
					<h3>Soaking in cold water</h3>
					<p>The loss on soaking in cold water, unless the water is preserved, is seen to be considerable. The split lentils, having had the protecting skin removed, lose most. In every case the ash contained a good deal of phosphate and lime. Potatoes are rich in important potash salts; by boiling a large quantity is lost, by steaming less and by baking in the skins, scarcely any. The flavour is also much better after baking.</p>
					<p>The usual addition of common salt (sodium-chloride) to boiled potatoes is no proper substitute for the loss of their natural saline constituents. Natural and properly cooked foods are so rich in sodium chloride and other salts that the addition of common salt is unnecessary. An excess of the latter excites thirst and spoils the natural flavour of the food. It is the custom, especially in restaurants, to add a large quantity of salt to pulse, savoury food, potatoes and soups. Bakers' brown bread is usually very salt, and sometimes white is also. In some persons much salt causes irritation of the skin, and the writer has knowledge of the salt food of vegetarian restaurants causing or increasing dandruff. As a rule, fondness for salt is an acquired taste, and after its discontinuance for a time, food thus flavoured becomes unpalatable.</p>
					<p>Organic Compounds are formed by living organisms (a few can also be produced by chemical means). They are entirely decomposed by combustion.</p>
					<h3>Carbon compounds or heat-producers</h3>
					<p>The Non-Nitrogenous Organic Compounds are commonly called carbon compounds or heat-producers, but these terms are also descriptive of the nitrogenous compounds. These contain carbon, hydrogen and oxygen only, and furnish by their oxidation or combustion in the body the necessary heat, muscular and nervous energy. The final product of their combustion is water and carbon dioxide (carbonic acid gas).</p>
					<p>The Carbohydrates comprise starch, sugar, gum, mucilage, pectose, glycogen, &amp;c.; cellulose and woody fibre are carbohydrates, but are little capable of digestion. They contain hydrogen and oxygen in the proportion to form water, the carbon alone being available to produce heat by combustion. Starch is the most widely distributed food. It is insoluble in water, but when cooked is readily digested and absorbed by the body. Starch is readily converted into sugar, whether in plants or animals, during digestion. There are many kinds of sugar, such as grape, cane and milk sugars.</p>
				</div>
			</article>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script>
			(function() {

				// detect if IE : from http://stackoverflow.com/a/16657946		
				var ie = (function(){
					var undef,rv = -1; // Return value assumes failure.
					var ua = window.navigator.userAgent;
					var msie = ua.indexOf('MSIE ');
					var trident = ua.indexOf('Trident/');

					if (msie > 0) {
						// IE 10 or older => return version number
						rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
					} else if (trident > 0) {
						// IE 11 (or newer) => return version number
						var rvNum = ua.indexOf('rv:');
						rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
					}

					return ((rv > -1) ? rv : undef);
				}());


				// disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179					
				// left: 37, up: 38, right: 39, down: 40,
				// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
				var keys = [32, 37, 38, 39, 40], wheelIter = 0;

				function preventDefault(e) {
					e = e || window.event;
					if (e.preventDefault)
					e.preventDefault();
					e.returnValue = false;  
				}

				function keydown(e) {
					for (var i = keys.length; i--;) {
						if (e.keyCode === keys[i]) {
							preventDefault(e);
							return;
						}
					}
				}

				function touchmove(e) {
					preventDefault(e);
				}

				function wheel(e) {
					// for IE 
					//if( ie ) {
						//preventDefault(e);
					//}
				}

				function disable_scroll() {
					window.onmousewheel = document.onmousewheel = wheel;
					document.onkeydown = keydown;
					document.body.ontouchmove = touchmove;
				}

				function enable_scroll() {
					window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;  
				}

				var docElem = window.document.documentElement,
					scrollVal,
					isRevealed, 
					noscroll, 
					isAnimating,
					container = document.getElementById( 'container' ),
					trigger = container.querySelector( 'button.trigger' );

				function scrollY() {
					return window.pageYOffset || docElem.scrollTop;
				}
				
				function scrollPage() {
					scrollVal = scrollY();
					
					if( noscroll && !ie ) {
						if( scrollVal < 0 ) return false;
						// keep it that way
						window.scrollTo( 0, 0 );
					}

					if( classie.has( container, 'notrans' ) ) {
						classie.remove( container, 'notrans' );
						return false;
					}

					if( isAnimating ) {
						return false;
					}
					
					if( scrollVal <= 0 && isRevealed ) {
						toggle(0);
					}
					else if( scrollVal > 0 && !isRevealed ){
						toggle(1);
					}
				}

				function toggle( reveal ) {
					isAnimating = true;
					
					if( reveal ) {
						classie.add( container, 'modify' );
					}
					else {
						noscroll = true;
						disable_scroll();
						classie.remove( container, 'modify' );
					}

					// simulating the end of the transition:
					setTimeout( function() {
						isRevealed = !isRevealed;
						isAnimating = false;
						if( reveal ) {
							noscroll = false;
							enable_scroll();
						}
					}, 600 );
				}

				// refreshing the page...
				var pageScroll = scrollY();
				noscroll = pageScroll === 0;
				
				disable_scroll();
				
				if( pageScroll ) {
					isRevealed = true;
					classie.add( container, 'notrans' );
					classie.add( container, 'modify' );
				}
				
				window.addEventListener( 'scroll', scrollPage );
				trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
			})();
		</script>
	</body>
</html>